<template>
	<view class="page" style="background-color: #fff;">
		<view class="title _paddingTop">
			动力电池检测
		</view>
		<view class="_marginTop" style="    border: 1px solid #eee; border-radius: 15rpx;">
			<view class="_flex align-items_center">
				<image src="../../static/b3_1.png" style="width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
				<view class="" style="font-weight: bold;">
					车辆基础信息
				</view>
			</view>
			<view class="" style="padding:0 20rpx;">
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">品牌型号</text>
					<text>比亚迪 汉</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">款型</text>
					<text>2020款EV四驱高性能车</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">VIN码</text>
					<text>LC2125454121</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">生产日期</text>
					<text>2020年8月</text>
				</view>
				<view class="" style="height: 80rpx;line-height: 80rpx;">
					<text class="carBaseName">表显里程</text>
					<text>12345公里</text>
				</view>
			</view>
		</view>
		<view class="_marginTop" style="    border: 1px solid #eee; border-radius: 10rpx;">
			<view class="_flex align-items_center">
				<image src="../../static/b3_2.png" style="width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
				<view class="" style="font-weight: bold;">
					电池健康度综合评分
				</view>
			</view>
			<view class="" style="padding:0 20rpx 20rpx 20rpx;">
				<view class="_flex _wrap _justify_center">
					<u-circle-progress active-color="#002B56" :percent="80">
							<view class="u-progress-content">
								<view class="u-progress-dot"></view>
								<text class='u-progress-info'>87.75</text>
							</view>
						</u-circle-progress>
				</view>
			</view>
		</view>
		<view class="_marginTop" style="    border: 1px solid #eee; border-radius: 10rpx;">
			<view class="_flex align-items_center">
				<image src="../../static/b3_6.png" style="width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
				<view class="" style="font-weight: bold;">
					核心数据检测结果
				</view>
			</view>
			<view class="" style="padding:0 20rpx 20rpx 20rpx;">
				<view class="">
					<view class="">
						续航水平
					</view>
					<view class="" style="border: 1px solid #eee;height: 50rpx;">
						<view class="dataBgColDark" style="width: 57%;">
							15.7
						</view>
					</view>
				</view>
				<view class="_paddingTop">
					<view class="">
						电池残值水平
					</view>
					<view class="" style="border: 1px solid #eee;height: 50rpx;">
						<view class="dataBgCol" style="width: 87%;">
							18.7
						</view>
					</view>
				</view>
				<view class="_paddingTop">
					<view class="">
						安全评分
					</view>
					<view class="dataBgCol" style="width: 55%;">
						15.5
					</view>
				</view>
				<view class="_paddingTop">
					<view class="">
						使用习惯
					</view>
					<view class="" style="border: 1px solid #eee;height: 50rpx;">
					<view class="dataBgCol" style="width: 10%;">
						10.3
					</view>
					</view>
				</view>
				<view class="_paddingTop">
					<view class="">
						剩余寿命
					</view>
					<view class="" style="border: 1px solid #eee;height: 50rpx;">
					<view class="dataBgCol" style="width: 81%;">
						18.1
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	export default {
		data() {
			return {
				form: {},
			};
		},
		methods: {}
	};
</script>
<style scoped>
	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
	}

	.carBaseName {
		color: #888;
		display: inline-block;
		width: 200rpx;
	}
	.batteryBox{
		width: 50%;
		    line-height: 52rpx;
	}
	.dataBgColDark{
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}
	.dataBgCol{
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}
</style>
